<template>
  <div>
    <ul>
      <li
        v-for="item in goodsList"
        :key="item.id"
        @click="gotoProductDetails(item.id)"
      >
        <img
          v-lazy="item.list_pic_url"
          :alt="item.name"
          width="100%"
        >
        <!-- <div class="van-ellipsis">基于VantUI的Vue移动端移动电商</div> -->
        <div class="productName">{{item.name}}</div>
        <div class="price">{{item.retail_price|priceFilter}}</div>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  props: ["goodsList"],
  data() {
    return {};
  },
  methods: {
    //跳转商品详情页并用路由query传参商品id
    gotoProductDetails(id) {
      this.$router.push("/productdetails?queryId=" + id);
      // this.$router.push("/productdetails/" + id);
      // this.$router.push({ path: "/productdetails", query: { queryId: id } });
      // this.$router.replace({ name: "ProductDetails", query: { queryId: id } });
      // this.$router.push({
      //   name: "ProductDetails",
      //   params: { id: id, qq: this.goodsList, bbb: 123 },
      //   query: { queryId: id },
      // });
    },
  },
};
</script>

<style lang='less' scoped>
ul {
  padding: 0.1rem 2%;
  display: flex;
  justify-content: space-between;
  //应让li自动拉伸，不应该垂直居中
  flex-wrap: wrap;
  background-color: #efefef;
  li {
    //这是减去ul的padding后剩下空间的49%！！
    //所以两个li中间分剩下空间的2%
    width: 49%;
    background-color: #fff;
    text-align: center;
    margin-bottom: 2%;
    padding-bottom: 0.05rem;
    border-radius: 0.05rem;
    .productName {
      padding: 0 0.05rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 0.3rem;
    }
    .price {
      color: darkred;
    }
  }
}
</style>